<!--
 * @Author: Bennty
 * @Date: 2024-08-06 14:58:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-08-07 10:10:32
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition 
        :enter-active-class="proxy?.animate.searchAnimate.enter"
        :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search">
                <el-form :model="queryParams" :inline="true" ref="queryFormRef">
                    <el-form-item label="产品大类" prop="totalCategory">
                        <el-select v-model="queryParams.totalCategory" placeholder="请选择">
                            <el-option label="不锈钢餐具" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品小类" prop="singleCategory">
                        <el-select v-model="queryParams.singleCategory" placeholder="请选择">
                            <el-option label="不锈钢餐具" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模糊搜索" prop="productName">
                        <el-input v-model="queryParams.productName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col class="header-button-container" :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAdd">新增</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="productList" class="product-table">
                <el-table-column label="产品大类" >
                    <template #default="scope">
                        <span :style="{lineHeight: 10}">{{ scope.row.totalCategory }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品小类" prop="singleCategory"></el-table-column>
                <el-table-column label="产品名称" prop="productName"></el-table-column>
                <el-table-column label="最低库存" prop="minInventory"></el-table-column>
                <el-table-column label="最高库存" prop="maxInventory"></el-table-column>
                <el-table-column label="显示顺序" prop="displayOrder"></el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button link :style="{fontSize:'15px'}" type="primary" icon="Edit" ></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link :style="{fontSize:'15px',color:'#F75C4E'}" icon="Delete" @click="handleClickDelete(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance,UploadInstance, UploadProps } from 'element-plus';
import { useRouter } from 'vue-router';
import { finishedBOMVO } from '@/api/sj/warehouse/finishedBOM/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const queryFormRef = ref<FormInstance>();
const productList = ref<finishedBOMVO[]>([]);
const data = reactive({
    queryParams:{
        totalCategory: undefined,
        singleCategory: undefined,
        productName: undefined,
        pageNum: 1,
        pageSize: 30
    },
});

const { queryParams } = toRefs(data);

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

/** 新增成品BOM */
const handleClickAdd = ()=>{
    router.push('/warehouse/addFinishedBOM')
};

const handleClickDelete = async (row:any)=>{
    await proxy?.$modal.confirm("确认要把此条信息放入回收站？");
    proxy?.$modal.msgSuccess("删除成功");
};

onMounted(()=>{
    for(let i=1;i<=30;i++){
        let product = {
            id: i,
            totalCategory: '不锈钢餐具',
            singleCategory: '抽屉餐具',
            productName: 'hjf不锈钢' + i,
            minInventory: 500,
            maxInventory: 2000,
            displayOrder: i,
            remark: 'test',
            preparedPuducts: [
                {
                    id:1,
                    singleCategory: '生日帽',
                    productName:'小韩CAKE折叠生日帽(独立包装)',
                    inventory: 0
                },
                {
                    id:2,
                    singleCategory: '抽屉盒',
                    productName:'小韩CAKE折叠生日帽(A款抽屉盒)',
                    inventory: 100
                }
            ],
            auxiliaries:[
                {
                    id: 1,
                    singleCategory: '不锈钢刀（18cm）',
                    productName: '小韩CAKE 18cm不锈钢刀',
                    inventory: 500
                },
                {
                    id: 2,
                    singleCategory: '不锈钢刀（18cm）',
                    productName: '专版火柴55-18-18',
                    inventory: 0
                },
                {
                    id: 3,
                    singleCategory: '不锈钢叉 ',
                    productName: '小韩CAKE专版不锈钢二齿叉',
                    inventory: 200
                }
            ]
        };
        productList.value.push(product);
    };
});

</script>

<style lang="scss" scoped>
// ::v-deep(.el-table){
//     td{
//         line-height: 10!important;
//     }

// }
</style>